<template>
	
	<div>
		<section class="bind-strip" style="margin-top: 3rem;">
			<mu-flat-button style="width: 100%; height: auto;">
				
				<div class="left-icon-container" >
					<section class="Wei-circle" style="float: left;">
				  		<mu-card-media >
		        			<img :src="weichatheadicon" style="width: 100%;"/>
		        		</mu-card-media>
		    		</section> 
				</div>
				<span class="weiChat-Name" >微信用户1058487915</span>
			</mu-flat-button>
		</section>
		
		<section class="bind-info" style="margin-top: 0.8rem;">
			<mu-flat-button style="width: 100%;height: auto;">
				<!--<mu-icon value="account_circle" color="#429cce" class="mu-iconLeft" />-->
				<div class="bind-info-icon">
					<section style="width: 1.5rem;height: 1.5rem;">
						<mu-card-media >
		        			<img :src="weiLogo" style="width: 100%;"/>
		        		</mu-card-media>
					</section>
				</div>
				
				<span class="bind-info-title" >微信用户</span>
				<span class="bind-state" >未绑定</span>
			</mu-flat-button>
		</section>
		
	</div>
	
	
</template>

<script>
	export default {
		data(){
			return{
				 message:'',
			     userIdentity:'',
			     isCommissary:false,
			     userInfo:{},
				 weichatheadicon:'static/images/weichatHeadicon.jpg',
				 weiLogo:'static/images/weiChaticon.png',
			}
			
		},
		computed:{
			userInfo:function(){
		      return this.$parent.userInfo
		    }
		},
		mounted(){
			 let that=this
		      that.userIdentity = localStorage.userIdentity
		      that.isCommissary = localStorage.isCommissary=='true'
		      if(localStorage.userInfo!=null){
		        that.userInfo = JSON.parse(localStorage.userInfo)
		      }
		}
			
	}
</script>

<style>
	.bind-strip{
		width:100%; 
		display:flex;
		flex-direction: row; 
		background-color: #fff !important;
		border-bottom: 1px solid #e4e4e4 ;
		margin-top:0.8rem;
	}
	.Wei-circle{
		width: 5rem; 
		height: 5rem; 
		background-color: white; 
		border-radius: 50%; 
		overflow: hidden; 
	}
	.left-icon-container{
		padding: 0.5rem 0;
		width: 22%;
		margin-left: 3%;
		float: left;
	}
	.weiChat-Name{
		width: 70%;
		text-align: left;
		font-size: 1.1rem;
		color: #747474;
		margin-right: 5%;
	}
	.bind-info{
		width:100%; 
		display:flex;
		flex-direction: row; 
		background-color: #fff !important;
		height: 3.6rem;
		border-bottom: 1px solid #e4e4e4 ;
	}
	.bind-info-icon{
		width: 8%; 
		text-align: left;
	}
	.bind-info-title{
		width: 20%; 
		font-size: 1rem;
		text-align: left; 
	}
	
	.bind-state{
		width: 64%; 
		margin-right: 3%;
		text-align: right;
		font-size: 1rem;
		color:#ababab
	}
</style>